<template>
  <el-dialog :title="title" :visible.sync="modify" width="80%" :before-close="handleClose" append-to-body>
    <el-row>
      <el-col :span="12">
        <h2>学生信息</h2>
        <el-form ref="form" :model="oldInfor" label-width="110px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名">{{ oldInfor.name }} </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别">
                {{ oldInfor.sex ? userSexListChange(oldInfor.sex) : "" }}
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="注册号">
                {{ oldInfor.registerCode }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="照片">
                <img :src="oldInfor.avatar" alt="" style="width: 100px; height: 100px; border-radius: 4px" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学号">
                {{ oldInfor.sno }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号">
                {{ oldInfor.cardCode }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生日期">
                {{ oldInfor.birthday }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="民族">{{
                oldInfor.nation ? nationTypeListChange(oldInfor.nation) : " "
              }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="籍贯">
                {{ oldInfor.nativePlace }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="政治面貌">
                {{
                  oldInfor.political
                    ? politicalTypeListChange(oldInfor.political)
                    : ""
                }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="户籍所在地">
                {{ oldInfor.residence }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属院系">{{ oldInfor.deptNames }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专业">
                {{ oldInfor.specialityName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="年级">
                {{ oldInfor.gradeName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="班级">
                {{ oldInfor.className }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学生类型">
                {{ oldInfor.studentType }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="入学时间">
                {{ oldInfor.joinDate }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="毕业时间">
                {{ oldInfor.guaduateDate }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="入学前户口类别">
                {{
                  oldInfor.nodeType ? nodeTypeListChange(oldInfor.nodeType) : ""
                }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话">
                {{ oldInfor.mobile }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱">
                {{ oldInfor.email }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="qq">
                {{ oldInfor.qq }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="微信">
                {{ oldInfor.wechatCode }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="健康状态">
                {{
                  oldInfor.healthStatus
                    ? heablthStatusListChange(oldInfor.healthStatus)
                    : " "
                }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="家长电话">
                {{ oldInfor.emergencyMobile }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学籍状态">
                {{
                  oldInfor.studentStatus
                    ? studentStatusListChange(oldInfor.studentStatus)
                    : ""
                }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生源地">
                {{ oldInfor.ofStudent }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="在校状态">
                {{
                  oldInfor.atSchool ? atSchoolListChange(oldInfor.atSchool) : ""
                }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="毕业高中">
                {{ oldInfor.highSchool }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="家庭地址">
                {{
                  this.getLabelByValue(oldInfor.address, this.addRessOptions) ||
                  ""
                }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <h3>家庭信息</h3>
        <el-table :data="oldInfor.studentFamilyList" border style="width: 100%">
          <el-table-column prop="reasonStatus" label="与本人关系" width="100">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.bc_student_famliy" :value="scope.row.reasonStatus"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="familyMobile" label="联系方式" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="wechatCode" label="微信号" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="unit" label="工作单位" :show-overflow-tooltip="true">
          </el-table-column>

          <el-table-column prop="familyAddress" label="家庭地址" :show-overflow-tooltip="true">
            <!-- <template slot-scope="scope">
                {{
                  scope.row.familyAddress == undefined
                    ? ""
                    : getLabelByValue(
                        scope.row.familyAddress,
                        this.addRessOptions
                      )
                }}
              </template> -->
          </el-table-column>
          <el-table-column prop="postalCode" label="家庭邮编" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="familyRemark" label="家庭备注" :show-overflow-tooltip="true">
          </el-table-column>
        </el-table>
        <h3>获奖信息</h3>
        <el-table :data="oldInfor.studentAwardsList" border style="width: 100%">
          <el-table-column prop="awardName" label="奖项名称">
          </el-table-column>
          <el-table-column prop="awardLevel" label="奖项级别">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.basic_awads_level" :value="scope.row.awardLevel"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column prop="issuingAuthority" label="颁发机构">
          </el-table-column>
          <el-table-column prop="awardDate" label="获奖日期">
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <h2>修改的学生信息</h2>
        <el-form ref="formRef" :model="newInfor" label-width="120px">
          <el-form-item v-for="(field, index) in filteredFields" style="
              font-size: 12px;
              color: #52c41a;
              background-color: #f6ffed;
              padding: 2px 2px;
              border-radius: 10px;
            " :key="index" :label="field.label">
            <!-- 调用映射方法显示值 -->
            {{ field ? getDisplayValue(field.key, newInfor[field.key]) : "" }}

            <!-- <img :src="field.key == 'avatar' " alt="" v-if="field.key == 'avatar'" style="width: 50px;height: 50px;"> -->
          </el-form-item>
          <el-form-item label="图片" v-if="newInfor.avatar">
            <img :src="newInfor.avatar" style="width: 100px; height: 100px; border-radius: 4px" />
            <!-- <img :src="field.key == 'avatar' " alt="" v-if="field.key == 'avatar'" style="width: 50px;height: 50px;"> -->
          </el-form-item>

          <h3>家庭信息</h3>
          <el-table :data="newInfor.studentFamilyList" border style="width: 100%">
            <el-table-column prop="reasonStatus" label="与本人关系" width="100">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.bc_student_famliy" :value="scope.row.reasonStatus"></dict-tag>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="familyMobile" label="联系方式" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="wechatCode" label="微信号" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="unit" label="工作单位" :show-overflow-tooltip="true">
            </el-table-column>

            <el-table-column prop="familyAddress" label="家庭地址" :show-overflow-tooltip="true">
              <!-- <template slot-scope="scope">
                {{
                  scope.row.familyAddress == undefined
                    ? ""
                    : getLabelByValue(
                        scope.row.familyAddress,
                        this.addRessOptions
                      )
                }}
              </template> -->
            </el-table-column>
            <el-table-column prop="postalCode" label="家庭邮编" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="familyRemark" label="家庭备注" :show-overflow-tooltip="true">
            </el-table-column>
          </el-table>
          <h3>获奖信息</h3>
          <el-table :data="newInfor.studentAwardsList" border style="width: 100%">
            <el-table-column prop="awardName" label="奖项名称">
            </el-table-column>
            <el-table-column prop="awardLevel" label="奖项级别">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.basic_awads_level" :value="scope.row.awardLevel"></dict-tag>
              </template>
            </el-table-column>
            <el-table-column prop="issuingAuthority" label="颁发机构">
            </el-table-column>
            <el-table-column prop="awardDate" label="获奖日期">
            </el-table-column>
          </el-table>
        </el-form>
      </el-col>
    </el-row>
    <el-form ref="form" :model="form" label-width="80px" style="margin-top: 10px;">
      <el-form-item label="审核意见">
        <el-input v-model="form.reason" placeholder="请输入审核意见"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handlePass" :disabled="notDisabled">同 意</el-button>
      <el-button type="warning" @click="application">驳 回</el-button>
      <el-button type="danger" @click="refuse">拒 绝</el-button>
      <el-button @click="closeDia">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { studentInfor } from "@/api/information/studentInfor";
import { getInforStuapprinfo } from "@/api/flowable/stuapply.js";
import { getDicts } from "@/api/system/dict/type";
import { getFormInfo } from "@/api/flowable/stuapply.js";

export default {
  components: {},
  props: {
    title: { type: String },
    deptOptions: {
      type: Array,
      default: function () {
        return [];
      },
    },
    addRessOptions: {
      type: Array,
      default: function () {
        return [];
      },
    },
    showType: {
      type: String,
      default: "operate",
    },
  },
  watch: {
    addRessOptions: {
      handler(newVal, oldVal) {
        // newVal是获取的是新的值
        console.log("new", newVal);
        this.addRessOptions = newVal;
      },
    },
  },
  dicts: [
    "bc_student_status", // 学籍状态
    "bc_political_type", // 政治面貌
    "bc_nation_type", // 民族
    "bc_student_type", // 学生类型
    "bc_node_type", // 入学前户口类别
    "follow_status", // 是否关注对象
    "sys_user_sex", // 性别
    "bc_student_famliy", // 家庭关系
    "bc_health_status", // 健康状态
    "basic_awads_level", // 获奖级别
    "basic_at_school", // 是否在校
  ],
  computed: {},
  data() {
    return {
      modify: false,
      newInfor: {},
      oldInfor: {},
      notDisabled: false,
      form: {
        reason: "",
        apprStatus: "",
        baiId: "",
      },
      formFields: [
        { key: "name", label: "姓名" },
        {
          key: "sexName",
          label: "性别",
        },
        {
          key: "registerCode",
          label: "注册号",
        },
        {
          key: "sno",
          label: "学号",
        },
        {
          key: "cardCode",
          label: "身份证号码",
        },
        {
          key: "birthday",
          label: "出生日期",
        },
        {
          key: "nationName",
          label: "民族",
        },
        {
          key: "nativePlace",
          label: "籍贯",
        },
        {
          key: "politicalName",
          label: "政治面貌",
        },
        {
          key: "residence",
          label: "户籍所在地",
        },
        {
          key: "deptNames",
          label: "所在院系",
        },
        {
          key: "specialityName",
          label: "专业",
        },
        {
          key: "gradeName",
          label: "年级",
        },
        {
          key: "className",
          label: "班级",
        },
        {
          key: "studentTypeName",
          label: "学生类型",
        },
        {
          key: "joinDate",
          label: "入学时间",
        },
        {
          key: "guaduateDate",
          label: "毕业时间",
        },
        {
          key: "nodeTypeName",
          label: "入学前户口类别",
        },
        {
          key: "mobile",
          label: "联系电话",
        },
        {
          key: "email",
          label: "邮箱",
        },
        {
          key: "qq",
          label: "QQ号",
        },
        {
          key: "wechatCode",
          label: "微信",
        },
        {
          key: "healthStatusName",
          label: "健康状况",
        },
        {
          key: "emergencyMobile",
          label: "家长电话",
        },
        {
          key: "studentStatusName",
          label: "学籍状态",
        },
        {
          key: "ofStudent",
          label: "生源地",
        },
        {
          key: "atSchoolName",
          label: "在校状态",
        },
        {
          key: "highSchool",
          label: "毕业高中",
        },
        {
          key: "address",
          label: "家庭地址",
        },
        {
          key: "addressInfo",
          label: "家庭详细地址",
        },
      ],
      userSexList: [],
      nationTypeList: [],
      politicalTypeList: [],
      heablthStatusList: [],
      studentStatusList: [],
      atSchoolList: [],
      nodeTypeList: [],
      currentLabel: "",
      parentLabel: "",
      userFormisModifyList:[],
    };
  },

  watch: {},
  computed: {
    // // 过滤出旧数据存在的字段
    filteredFields() {
      return this.formFields.filter((field) => {
        // Vue2 兼容性写法：使用 Object.prototype 判断属性存在性
        return Object.prototype.hasOwnProperty.call(this.newInfor, field.key);
      });
    },
  },
  created() {
    getDicts("sys_user_sex").then((res) => {
      this.userSexList = res.data;
    });
    getDicts("bc_nation_type").then((res) => {
      this.nationTypeList = res.data;
    });
    getDicts("bc_political_type").then((res) => {
      this.politicalTypeList = res.data;
    });
    getDicts("bc_health_status").then((res) => {
      this.heablthStatusList = res.data;
    });
    getDicts("bc_student_status").then((res) => {
      this.studentStatusList = res.data;
      console.log(this.studentStatusList, "studentStatusList");
    });
    getDicts("basic_at_school").then((res) => {
      this.atSchoolList = res.data;
    });
    getDicts("bc_node_type").then((res) => {
      this.nodeTypeList = res.data;
    });

    getFormInfo('userForm').then(res=>{
      res.data.forEach(e=>{
        if(e.isModify == 'Y'){
          this.userFormisModifyList.push(e.filedName)
        }
      })
    })
  },
  methods: {
    getDisplayValue(key, value) {
      // console.log(key, value);
      switch (key) {
        default:
          return value;
      }
    },
    // 性别下拉框
    userSexListChange(val) {
      console.log(val); //value值
      let assetData = this.userSexList.find((item) => item.dictValue === val);
      val = assetData.dictLabel; //label值
      return val;
    },
    // 民族下拉框
    nationTypeListChange(val) {
      console.log(val, "minzu"); //value值
      let assetData = this.nationTypeList.find(
        (item) => item.dictValue === val
      );
      val = assetData.dictLabel; //label值
      return val;
    },
    // 政治面貌下拉框
    politicalTypeListChange(val) {
      console.log(val); //value值
      let assetData = this.politicalTypeList.find(
        (item) => item.dictValue === val
      );
      val = assetData.dictLabel; //label值
      return val;
    },
    // 健康状态下拉框
    heablthStatusListChange(val) {
      console.log(val); //value值
      let assetData = this.heablthStatusList.find(
        (item) => item.dictValue === val
      );
      val = assetData.dictLabel; //label值
      return val;
    },
    // 学籍状态下拉框
    studentStatusListChange(val) {
      console.log(val); //value值
      let assetData = this.studentStatusList.find(
        (item) => item.dictValue === val
      );
      val = assetData.dictLabel; //label值
      return val;
    },
    // 在校状态下拉框
    atSchoolListChange(val) {
      console.log(val); //value值
      let assetData = this.atSchoolList.find((item) => item.dictValue === val);
      val = assetData.dictLabel; //label值
      return val;
    },
    // 入学前户口类别
    nodeTypeListChange(val) {
      console.log(val); //value值
      let assetData = this.nodeTypeList.find((item) => item.dictValue === val);
      val = assetData.dictLabel; //label值
      return val;
    },
    // 审核通过
    handlePass() {
      this.notDisabled = false
      this.$emit("pass", this.form);

      this.form = {}
    },
    // 审核通过
    application() {
      this.$emit("reject", this.form);
      this.form = {}
    },
    // 审核通过
    refuse() {
      this.$emit("refuse", this.form);
      this.form = {}
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    // 取消
    closeDia() {
      this.modify = false;
    },
    examineDialog(data) {
      this.modify = true;
      getInforStuapprinfo(data).then((res) => {
        // console.log(res,'审核')
        this.form.baiId = res.data.baiId;
        let data = JSON.parse(res.data.parameter);

        // 添加过滤 展示 
        // this.userFormisModifyList = this.userFormisModifyList.slice(0,10)
        for(let key in data){
          if(!this.userFormisModifyList.includes(key) && key!= 'studentAwardsList' && key !='studentFamilyList'){
            delete data[key]
          }
        }


        this.newInfor = data;
        if (this.newInfor.studentFamilyList.length > 0) {
          this.newInfor.studentFamilyList.forEach((item) => {
            if (item.familyAddress) {
              item.familyAddress = this.findLabelByCode(
                this.addRessOptions,
                item.familyAddress
              );
            }
          });
        }
        if (this.newInfor.nativePlace) {
          this.newInfor.nativePlace = this.findLabelByCode(
            this.addRessOptions,
            this.newInfor.nativePlace
          );
        }

        this.newInfor.address = this.findLabelByCode(
          this.addRessOptions,
          this.newInfor.address
        );
        // this.newInfor.nativePlace = this.getLabelByValue(this.addRessOptions,  this.newInfor.nativePlace);
        // this.newInfor.address = this.getLabelByValue(this.addRessOptions,  this.newInfor.address);

        console.log(
          this.newInfor,
          this.formFields.address,
          res,
          this.addRessOptions,
          "xxxx"
        );
        // this.newInfor = this.newInfor.Parameters
        studentInfor(res.data.studentId)
          .then((response) => {
            this.oldInfor = response.data;
            console.log(response, this.oldInfor, "学生信息");
            // this.oldInfor = this.transformObject(this.oldInfor);
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },

    findLabelByCode(data, code) {
      for (const item of data) {
        if (item.unitCode === code) {
          return item.label; // 直接匹配成功
        }
        // 若存在子节点，递归查找子层级
        if (item.children && item.children.length > 0) {
          const result = this.findLabelByCode(item.children, code);
          if (result) {
            return result; // 子层级中找到结果则返回
          }
        }
      }
      return null; // 未找到
    },
    getLabelByValue(value, optionList) {
      try {
        if (value instanceof Array) {
          value = value[2]
        }
      }catch(err){
        console.log(err)
      }
      for (const option of optionList) {
        if (option.unitCode === value) {
          return option.label;
        }
        if (option.children) {
          const result = this.getLabelByValue(value, option.children);
          if (result) {
            return result;
          }
        }
      }
      return "";
    },
    //     getFieldColor (key)  {
    //   return oldFormData.value[key]!== newFormData.value[key]? 'red' : 'inherit';
    // },

    transformObject(obj) {
      return {
        name: obj.name || "",
        sex: obj.sex || "",
        registerCode: obj.registerCode || "",
        sno: obj.sno || "",
        cardCode: obj.cardCode || "",
        birthday: obj.birthday || "",
        nation: obj.nation || "",
        nativePlace: obj.nativePlace || "",
        political: obj.political || "",
        residence: obj.residence || "",
        deptId: obj.deptId ? String(obj.deptId) : "",
        specialityId: obj.specialityId ? String(obj.specialityId) : "",
        avatar: obj.avatar || "",
        gradeId: obj.gradeId ? String(obj.gradeId) : "",
        classId: obj.classId ? String(obj.classId) : "",
        studentType: obj.studentType || "",
        joinDate: obj.joinDate || "",
        guaduateDate: obj.guaduateDate || "",
        nodeType: obj.nodeType || "",
        mobile: obj.mobile || "",
        email: obj.email || "",
        qq: obj.qq || "",
        wechatCode: obj.wechatCode || "",
        healthStatus: obj.healthStatus || "",
        emergencyMobile: obj.emergencyMobile || "",
        studentStatus: obj.studentStatus || "",
        ofStudent: obj.ofStudent || "",
        atSchool: obj.atSchool || "",
        highSchool: obj.highSchool || "",
        address: obj.address || "",
        studentAwardsList: obj.studentAwardsList || [],
        studentFamilyList: obj.studentFamilyList || [],
      };
    },
    transNewObject(obj) {
      return {
        name: obj.applyName || "",
        sex: obj.sex || "",
        registerCode: obj.applyRegisterCode || "",
        sno: obj.sno || "",
        cardCode: obj.cardCode || "",
        birthday: obj.birthday || "",
        nation: obj.nation || "",
        nativePlace: obj.nativePlace || "",
        political: obj.political || "",
        residence: obj.residence || "",
        deptId: obj.deptId ? String(obj.deptId) : "",
        specialityId: obj.specialityId ? String(obj.specialityId) : "",
        avatar: obj.avatar || "",
        gradeId: obj.gradeId ? String(obj.gradeId) : "",
        classId: obj.classId ? String(obj.classId) : "",
        studentType: obj.studentType || "",
        joinDate: obj.joinDate || "",
        guaduateDate: obj.guaduateDate || "",
        nodeType: obj.nodeType || "",
        mobile: obj.mobile || "",
        email: obj.email || "",
        qq: obj.qq || "",
        wechatCode: obj.wechatCode || "",
        healthStatus: obj.healthStatus || "",
        emergencyMobile: obj.emergencyMobile || "",
        studentStatus: obj.studentStatus || "",
        ofStudent: obj.ofStudent || "",
        atSchool: obj.atSchool || "",
        highSchool: obj.highSchool || "",
        address: obj.address || "",
        studentAwardsList: obj.studentAwardsList || [],
        studentFamilyList: obj.studentFamilyList || [],
      };
    },
    compareObjects(oldInfor, newInfor) {
      const result = {};
      const allKeys = new Set([
        ...Object.keys(oldInfor),
        ...Object.keys(newInfor),
      ]);

      allKeys.forEach((key) => {
        const oldValue = oldInfor[key];
        const newValue = newInfor[key];
        let isDifferent = false;

        if (
          typeof oldValue === "object" &&
          oldValue !== null &&
          typeof newValue === "object" &&
          newValue !== null
        ) {
          result[key] = {
            value: this.compareObjects(oldValue, newValue),
            isDifferent: false,
          };
          for (const subKey in result[key].value) {
            if (result[key].value[subKey].isDifferent) {
              result[key].isDifferent = true;
              break;
            }
          }
        } else {
          isDifferent = oldValue !== newValue;
          result[key] = {
            oldValue,
            newValue,
            isDifferent,
          };
        }
      });

      return result;
    },
  },
};
</script>

<style scoped>
.modified-hint {
  margin-left: 10px;
  font-size: 12px;
  color: #52c41a;
  background-color: #f6ffed;
  padding: 2px 6px;
  border-radius: 10px;
}
</style>